import React, {useEffect} from 'react';
import './login.scss'
import Icon from '../icon/icon';

const Login:React.FunctionComponent=()=>{
  useEffect(()=>{
    const removeHidden= function(e:Event) {
        e.stopPropagation ()
        if (e.target &&e.target.nodeName.toUpperCase()==='INPUT' && e.target.value.length > 0) {
          iconSpan && iconSpan.classList.remove('re-hidden')
        }
      }
    const parent=document.querySelector('.re-input-row')
    const input=parent&&parent.children[1]
    const iconSpan=parent&&parent.children[2]

    parent&&parent.addEventListener('click',(e)=>{
      input&&input.addEventListener('focus',removeHidden)
      input&&input.addEventListener('input',removeHidden)
      iconSpan&&iconSpan.addEventListener('click',function () {
        e.stopPropagation()
        input&&(input.value='')
      })
      input&&input.addEventListener('blur',function (e) {
        if (e.target &&e.target.nodeName.toUpperCase()==='INPUT') {
          setTimeout(()=>{iconSpan&&iconSpan.classList.add('re-hidden')},200)
        }
      })
    })
  },[])
  return(
    <form action="" className={'re-input-group'}
          style={{maxWidth:'320px'}}>
      <label>
        <div className={'re-input-row'}>
        <span>用户名</span><input type="text" className={'re-input-clear'} placeholder={'请输入用户名'}/>
          <span className={'re-input-icon re-hidden'}>
            <Icon name="close" />
          </span>
        </div>
      </label>
      <label>
        <div className={'re-input-row'}>
        <span>密码</span><input type="password" placeholder={'请输入密码'}/>
        </div>
      </label>
      <div className="re-button-row">
        <button type={'submit'} className={'re-btn-confirm'}
        >确认</button>
        <button type={'button'} className={'re-btn-danger'}>取消</button>
      </div>
    </form>
  )
}

export default Login;